<template>
  <el-row class="treecom" style="width: 100%">
    <!-- 渲染部门数据 -->
    <el-col :span="12">
      <!-- 使用data里面的isHead的状态来显示与隐藏 -->
      <i v-if="data.isHead" class="el-icon-platform-eleme"></i>
      <!-- 加出标题公司也就是第一个状态为true就有这个类名 -->
      <span :class="{ title: data.isHead }">{{ data.name }}</span></el-col
    >
    <el-col :span="12" style="text-align: right">
      <!-- 渲染负责人部分 -->
      <span class="manager">{{ data.manager }}</span>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          操作<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="add">添加子部门</el-dropdown-item>
          <!-- 取反则没有这两个选项 -->
          <el-dropdown-item v-if="!data.isHead" command="ckeck"
            >查看部门</el-dropdown-item
          >
          <el-dropdown-item v-if="!data.isHead" command="del"
            >删除部门</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
  </el-row>
</template>

<script>
// 导入删除部门接口,导入根据id查询部门id接口
import { removeDeptListApi } from "@/api/departments";
export default {
  props: ["data"],

  methods: {
    handleCommand(key) {
      if (key == "add") {
        // 点击新增时调用父组件中定义的方法
        this.$emit("openadd", this.data.id);
      } else if (key == "ckeck") {
        // 这里是查看部门内容
        this.$emit('openedit',this.data.id)
      } else if (key == "del") {
        // 点击时弹出提示框
        this.$confirm("是否删除此部门", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          // 点击确定进入到这
        })
          .then(async () => {
            // 提示用户
            this.$message.success("删除成功");
            // 调用接口发送请求传入id
            await removeDeptListApi(this.data.id);
            //  调用父组件中的刷新数据方法
            this.$emit("updatedata");
          })
          .catch(() => {
            // 提示删除失败
            this.$message.error("删除失败");
          });
      }
    },
  },
};
</script>

<style lang="scss">
.treecom {
  padding-bottom: 10px;
  .title {
    font-weight: 700;
  }
  .manager {
    font-size: 14px;
    margin-right: 20px;
  }
}
</style>
